<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册 - 疫苗预约系统</title>
    <link rel="stylesheet" href="css/register.css">
    <!-- Font Awesome 图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
    <div class="container">
        <!-- 左侧装饰区域 -->
        <div class="left-section">
            <div class="logo-section">
                <i class="fas fa-syringe logo-icon"></i>
                <h1>疫苗预约系统</h1>
                <p class="subtitle">Vaccine Appointment System</p>
            </div>
            <div class="illustration">
                <i class="fas fa-user-plus illustration-icon"></i>
            </div>
            <p class="welcome-text">加入我们，共同守护健康</p>
        </div>

        <!-- 右侧注册表单区域 -->
        <div class="right-section">
            <div class="register-box">
                <h2 class="form-title">用户注册</h2>
                <p class="form-subtitle">创建您的账号，开始使用疫苗预约服务</p>

                <!-- 注册表单 -->
                <form id="registerForm" class="register-form">
                    <!-- 账号输入框 -->
                    <div class="form-group">
                        <label for="account">
                            <i class="fas fa-user"></i>
                            账号 <span class="required">*</span>
                        </label>
                        <input 
                            type="text" 
                            id="account" 
                            name="account" 
                            placeholder="请输入账号（3-20个字符）"
                            autocomplete="username"
                            required>
                        <span class="error-message" id="accountError"></span>
                    </div>

                    <!-- 密码输入框 -->
                    <div class="form-group">
                        <label for="password">
                            <i class="fas fa-lock"></i>
                            密码 <span class="required">*</span>
                        </label>
                        <div class="password-wrapper">
                            <input 
                                type="password" 
                                id="password" 
                                name="password" 
                                placeholder="请输入密码（至少6个字符）"
                                autocomplete="new-password"
                                required>
                            <i class="fas fa-eye toggle-password" id="togglePassword"></i>
                        </div>
                        <div class="password-strength" id="passwordStrength">
                            <div class="strength-bar">
                                <div class="strength-fill" id="strengthFill"></div>
                            </div>
                            <span class="strength-text" id="strengthText"></span>
                        </div>
                        <span class="error-message" id="passwordError"></span>
                    </div>

                    <!-- 确认密码输入框 -->
                    <div class="form-group">
                        <label for="confirmPassword">
                            <i class="fas fa-lock"></i>
                            确认密码 <span class="required">*</span>
                        </label>
                        <div class="password-wrapper">
                            <input 
                                type="password" 
                                id="confirmPassword" 
                                name="confirmPassword" 
                                placeholder="请再次输入密码"
                                autocomplete="new-password"
                                required>
                            <i class="fas fa-eye toggle-password" id="toggleConfirmPassword"></i>
                        </div>
                        <span class="error-message" id="confirmPasswordError"></span>
                    </div>

                    <!-- 姓名输入框 -->
                    <div class="form-group">
                        <label for="name">
                            <i class="fas fa-id-card"></i>
                            姓名 <span class="required">*</span>
                        </label>
                        <input 
                            type="text" 
                            id="name" 
                            name="name" 
                            placeholder="请输入真实姓名"
                            autocomplete="name"
                            required>
                        <span class="error-message" id="nameError"></span>
                    </div>

                    <!-- 身份证号输入框 -->
                    <div class="form-group">
                        <label for="idNum">
                            <i class="fas fa-id-card-alt"></i>
                            身份证号 <span class="required">*</span>
                        </label>
                        <input 
                            type="text" 
                            id="idNum" 
                            name="idNum" 
                            placeholder="请输入18位身份证号"
                            maxlength="18"
                            required>
                        <span class="error-message" id="idNumError"></span>
                    </div>

                    <!-- 年龄输入框 -->
                    <div class="form-group">
                        <label for="age">
                            <i class="fas fa-calendar-alt"></i>
                            年龄 <span class="required">*</span>
                        </label>
                        <input 
                            type="number" 
                            id="age" 
                            name="age" 
                            placeholder="请输入年龄"
                            min="0"
                            max="150"
                            required>
                        <span class="error-message" id="ageError"></span>
                    </div>

                    <!-- 邮箱输入框 -->
                    <div class="form-group">
                        <label for="email">
                            <i class="fas fa-envelope"></i>
                            邮箱
                        </label>
                        <input 
                            type="email" 
                            id="email" 
                            name="email" 
                            placeholder="请输入邮箱地址（选填）"
                            autocomplete="email">
                        <span class="error-message" id="emailError"></span>
                    </div>

                    <!-- 注册按钮 -->
                    <button type="submit" class="btn-register" id="registerBtn">
                        <span class="btn-text">注册</span>
                        <span class="btn-loading" style="display: none;">
                            <i class="fas fa-spinner fa-spin"></i> 注册中...
                        </span>
                    </button>

                    <!-- 登录链接 -->
                    <div class="login-link">
                        已有账号？<a href="login.html">立即登录</a>
                    </div>
                </form>

                <!-- 提示信息 -->
                <div class="alert" id="alertBox" style="display: none;">
                    <i class="fas fa-exclamation-circle"></i>
                    <span id="alertMessage"></span>
                </div>
            </div>
        </div>
    </div>

    <script src="js/register.js?v=20251120"></script>
</body>
</html>
